<template>
	<div>
		<div>这是商品详情页面</div>
		<div class="my-detail">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="(item,i) in product.picList" :key="i">
					<van-image :src="APIDomainName + item.md" /></van-swipe-item>
			</van-swipe>
			<van-cell title="商品编号" :value="product.id" />
			<van-cell title="商品名称" :value="product.name" />
			<van-cell title="商品标题" :value="product.title" />
			<van-cell title="商品规格" :value="product.spec" />
			<van-cell title="硬盘" :value="product.disk" />
			<van-cell title="CPU" :value="product.cpu" />
			<van-cell title="内存" :value="product.memory" />
			<van-cell title="显卡" :value="product.video_card" />
			<van-cell title="分辨率" :value="product.resolution" />
			<van-cell title="上架时间" :value="product.shelf_time" />
			<van-cell title="单价" :value="product.price" />
			<van-button type="primary" size="large" @click="$router.back()">返回</van-button>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const product = ref({})
	const APIDomainName = import.meta.env.VITE_APIDomainName
	import { useRoute } from "vue-router"
	const id = useRoute().query.id

	import http from "@/utils/request.js";
	// 调用接口
	http.request({
		url: "product/detail",
		method: "get",
		params: {
			id
		},
	}).then(result => {
		product.value = result.data;
	})
</script>

<style>
</style>